<template>
  <div class="download">
    <Loading :isLoading = "isLoading" />
    <div class="title">
      <h3>Access All Sources</h3>
    </div>
    <div>
      <a-tabs default-active-key="1" @change="handleTabChange">
        <a-tab-pane key="dataSheets" tab="Datasheets" >
          <div>
            <div class="header">
              <div class="show-num">
                <span>Show</span>
                <a-select :default-value="pageSize" style="width: 80px" @change="handleChange">
                  <a-select-option value="10">
                    10
                  </a-select-option>
                  <a-select-option value="25">
                    25
                  </a-select-option>
                  <a-select-option value="50">
                    50
                  </a-select-option>
                  <a-select-option value="100">
                    100
                  </a-select-option>
                </a-select>
                <span>entries</span>
              </div>
              <div class="search-bar">
                <span>Search</span>
                <a-input-search
                  v-model:value="searchValue"
                  style="width: 200px"
                  @search="onSearch"
                />
              </div>
            </div>
            <a-table
              :columns="columns"
              :row-key="(record) => {
                return (Number(record.id) + Number(Date.now()))
              }"
              :data-source="dataArr"
              @change="onChange"
              :pagination="{
                total: totalNum,
                pageSize:pageSize,
                showTotal: (total,range) =>`Showing ${range[0]} to ${range[1]} of ${totalNum} entries`,
              }"
            >
              <template #link="{ text }"><a :href="text" target="_blank">Download</a></template>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="brochures" tab="Brochures">
          <div>
            <div class="header">
              <div class="show-num">
                <span>Show</span>
                <a-select :default-value="pageSize" style="width: 80px" @change="handleChange">
                  <a-select-option value="10">
                    10
                  </a-select-option>
                  <a-select-option value="25">
                    25
                  </a-select-option>
                  <a-select-option value="50">
                    50
                  </a-select-option>
                  <a-select-option value="100">
                    100
                  </a-select-option>
                </a-select>
                <span>entries</span>
              </div>
              <div class="search-bar">
                <span>Search</span>
                <a-input-search
                  v-model:value="searchValue"
                  style="width: 200px"
                  @search="onSearch"
                />
              </div>
            </div>
            <a-table
              :columns="columns"
              :row-key="(record) => {
                return (Number(record.id) + Number(Date.now()))
              }"
              :data-source="dataArr"
              @change="onChange"
              :pagination="{
                total: totalNum,
                pageSize:pageSize,
                showTotal: (total,range) =>`Showing ${range[0]} to ${range[1]} of ${totalNum} entries`,
              }"
            >
              <template #link="{ text }"><a :href="text" target="_blank">Download</a></template>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="sources" tab="Sources">
          <div>
            <div class="header">
              <div class="show-num">
                <span>Show</span>
                <a-select :default-value="pageSize" style="width: 80px" @change="handleChange">
                  <a-select-option value="10">
                    10
                  </a-select-option>
                  <a-select-option value="25">
                    25
                  </a-select-option>
                  <a-select-option value="50">
                    50
                  </a-select-option>
                  <a-select-option value="100">
                    100
                  </a-select-option>
                </a-select>
                <span>entries</span>
              </div>
              <div class="search-bar">
                <span>Search</span>
                <a-input-search
                  v-model:value="searchValue"
                  style="width: 200px"
                  @search="onSearch"
                />
              </div>
            </div>
            <a-table
              :columns="columns"
              :row-key="(record) => {
                return (Number(record.id) + Number(Date.now()))
              }"
              :data-source="dataArr"
              @change="onChange"
              :pagination="{
                total: totalNum,
                pageSize:pageSize,
                showTotal: (totalNum,range) =>`Showing ${range[0]} to ${range[1]} of ${totalNum} entries`,
              }"
            >
              <template #link="{ text }"><a :href="text" target="_blank">Download</a></template>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import {defineComponent, ref, onMounted} from 'vue';
import {getDownloadList} from "../../api/support";
import Loading from '../Loading.vue'
const columns = [
  // {
  //   title: 'ID',
  //   dataIndex: 'id',
  //   sorter: false,
  //   scopedSlots: { customRender: 'product' },
  // },
  {
    title: 'PRODUCT',
    dataIndex: 'product',
    sorter: false,
    scopedSlots: { customRender: 'product' },
  },
  {
    title: 'PRODUCT SERIES',
    dataIndex: 'productSeries',
    sorter: false,
    scopedSlots: { customRender: 'productSeries' },
  },
  {
    title: 'CATEGORY',
    dataIndex: 'category',
    sorter: false,
    scopedSlots: { customRender: 'category' },
  },
  {
    title: 'DOCUMENT TYPE',
    dataIndex: 'documentType',
    sorter: false,
    scopedSlots: { customRender: 'documentType' },
  },
  {
    title: 'DOWNLOAD',
    dataIndex: 'link',
    slots: { customRender: 'link' },
  },
];
export default defineComponent({
  name: 'Download',
  components:{Loading},
  setup() {
    const searchValue=ref("")
    let dataArr=ref([])
    let totalNum=ref(0)
    let type=ref("dataSheets")
    let pageSize = ref(10)
    let isLoading = ref(true)
    onMounted(()=>{
      getData({
        "category": "dataSheets",
        "page":1,
        "pageSize":10,
        "keyword":""
      })
    })

    const onSearch = () => {
      getData({
        "category": type.value,
        "page":1,
        "pageSize": pageSize.value,
        "keyword":searchValue.value
      })
      searchValue.value = ""
    }

    const onChange = (pagination, filters, sorter) => {
      getData({
        "category": type.value,
        "page":pagination.current,
        "pageSize":pagination.pageSize,
        "keyword":searchValue.value
      })
    };

    const handleChange = (value) => {
      pageSize.value = Number(value)
      getData({
        "category": type.value,
        "page":1,
        "pageSize":Number(value),
        "keyword":searchValue.value
      })
    }

    const handleTabChange = (value) => {
      type.value = value
      getData({
        "category": value,
        "page":1,
        "pageSize":pageSize.value,
        "keyword":"",
      })
    }
    //获取列表
    const getData = (data) => {
      getDownloadList({
        "category": data.category,
        "page": data.page,
        "page_size": data.pageSize,
        "keyword":data.keyword,
      }).then((res) => {
        if (res && res.code === 200) {
          let arrData = []
          res.data.list.forEach((item) => {
            arrData.push({
              id: item.id,
              product: item.product_name,
              productSeries: item.product_series,
              category: item.category,
              documentType:item.document_type,
              link:item.file_path
            })
          })
          totalNum.value = res.data.total
          dataArr.value = arrData
          isLoading.value = false
        }
      })
    }

    return {
      dataArr,
      columns,
      searchValue,
      handleChange,
      handleTabChange,
      getData,
      totalNum,
      type,
      onChange,
      onSearch,
      isLoading,
      pageSize
    };
  },
});
</script>

<style lang="scss" scoped>
.download{
  .header{
    display: flex;
    justify-content:space-between;
    margin:15px 0;
    span{
      padding:0 5px;
    }
    ::v-deep .ant-input-affix-wrapper{
      padding:4px 11px;
    }
  }
  .title{
    h3{
      font-size:50px;
      color:#1d1d1b;
      margin-bottom:0px;
    }
  }
}
</style>
